<template>
  <div>

    <Head />
    <main>
      <div class="top">
        <div class="left">
          <a @click="back" style="color: #007bff">&lt;&nbsp;返回</a>
        </div>
        {{ testInfo.title }}
      </div>
      <div class="content1">
        <ul class="list-group">
          <li class="list-group-item"><strong>试卷信息</strong></li>
          <li class="list-group-item">
            考试类型： <span>{{ testInfo.typeId.type }}</span>
          </li>
          <li class="list-group-item">
            考试时间： <span>{{ testInfo.date }}</span>
          </li>
          <li class="list-group-item">
            答卷时间： <span>{{ testInfo.time }}</span>
          </li>
          <li class="list-group-item">考试方式： <span>线上</span></li>
        </ul>
        <ul class="list-group">
          <li class="list-group-item">
            <strong>考生信息</strong>
            <button>信息有误？去修改</button>
          </li>
          <li class="list-group-item">
            姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
            <span>{{ $store.state.userInfo.name }}</span>
          </li>
          <li class="list-group-item">
            证件号码：<span>{{ $store.state.userInfo.phone }}</span>
          </li>
          <li class="list-group-item">
            部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门：
            <span>蜗牛学院</span>
          </li>
          <li class="list-group-item">&nbsp;</li>
        </ul>
      </div>
      <p>
        温馨提示:开始考试后会启动计时器，交卷时间到系统将自动提交分数，请考生检查答题是否完毕
      </p>
      <div class="content2">
        <ul class="list-group">
          <li class="list-group-item"><strong>考试须知</strong></li>
          <li class="list-group-item">
            A-Level考试开始:<br />
            1、拿到考卷后，在老师指示下，仔细阅读封面的指示(ps:这- 点要特别注<br />
            意,看清要求!)。<br />
            2、不要在老师指示之前翻开试卷阅读题目。<br />
            3、不要在桌面上写字,所有的过程应该写在考纸上。<br />
            A-Level考试中途:<br />
            1、A-Level考试中如遇特殊情况，需暂时离开考场，需A-Level考试中心工作人
            员陪同。<br />
            2、考生不能互借文具，交头接耳，影响考场秩序。<br />
            A-Level考试开始:<br />
            1、拿到考卷后，在老师指示下，仔细阅读封面的指示(ps:这- 点要特别注<br />
            意,看清要求!)。<br />
            2、不要在老师指示之前翻开试卷阅读题目。<br />
            3、不要在桌面上写字,所有的过程应该写在考纸上。<br />
            A-Level考试中途:<br />
            1、A-Level考试中如遇特殊情况，需暂时离开考场，需A-Level考试中心工作人
            员陪同。<br />
            2、考生不能互借文具，交头接耳，影响考场秩序。<br />
          </li>
        </ul>
      </div>
      <div class="content3">
        <router-link class="btn btn-primary" to="/stest3">开始考试</router-link>
      </div>
    </main>
  </div>
</template>

<script>
import Head from "../home/Head.vue";
export default {
  components: {
    Head,
  },
  data() {
    return {
      testInfo: "",
    };
  },
  methods: {
    back() {
      history.back();
    },
  },
  beforeMount() {
    this.testInfo = JSON.parse(localStorage.testInfo);
  },
};
</script>

<style lang="scss" scoped>
// 头部
.header {
  width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  height: 50px;
  display: flex;
  background-color: #fff;
  align-items: center;
  justify-content: space-between;
  .userInfo {
    .img {
      width: 30px;
      height: 30px;
      border-radius: 15px;
      background-color: blue;
      margin-right: 20px;
    }
    display: flex;
    align-items: center;
  }
}
main {
  width: 1050px;
  margin: 0 auto;
  //   border: 1px solid red;
  // background-color: white;
  margin-top: 36px;
  .top {
    height: 68px;
    background-color: white;
    text-align: center;
    line-height: 68px;
    position: relative;
    color: #333;
    .left {
      //   width: 105px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 20px;
    }
  }
  .content1 {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    ul {
      width: 49%;
      li {
        border: 0 !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
        span {
          color: red;
        }
        &:first-child {
          display: flex;
          justify-content: space-between;
          align-items: center;
          button {
            font-size: 12px;
            border: 0;
            background-color: #199ed8;
            color: white;
          }
        }
      }
    }
  }
  > p {
    line-height: 50px;
  }
  .content2 {
    // height: 350px;
    background-color: #fff;
    margin-bottom: 30px;
    ul {
      li {
        &:last-child {
          height: 298px;
          border: 0 !important;
          overflow-y: scroll;
          color: #777;
        }
      }
    }
  }
  .content3 {
    text-align: center;
    margin-bottom: 30px;
    a {
      width: 500px;
      height: 45px;
    }
  }
}
</style>
